<template>
    <div class="">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item>签名管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <!-- 新增按钮 -->
        <el-row :gutter="10" class="mb8" style="marginBottom:20px">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addTaskHandle">新增</el-button>
        </el-col>
      </el-row>
        <!-- 内容区域 -->
        <el-table :data="userList" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="signName" label="签名名称"  align="center"> </el-table-column>
        <el-table-column prop="auditStatus" label="审批状态"  align="center"> 
            <!--AUDIT_STATE_INIT：审核中，AUDIT_STATE_PASS：审核通过 ，AUDIT_STATE_NOT_PASS：审核未通过，AUDIT_STATE_CANCEL：取消审核 -->
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus==='AUDIT_STATE_INIT'">审核中</span>
              <span v-if="scope.row.auditStatus==='AUDIT_STATE_PASS'">审核通过</span>
              <span v-if="scope.row.auditStatus==='AUDIT_STATE_NOT_PASS'">审核未通过</span>
              <span v-if="scope.row.auditStatus==='AUDIT_STATE_CANCEL'">取消审核</span>
            </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" align="center" > </el-table-column>
        <el-table-column prop="reason" label="签名类型" align="center">
            <template slot-scope="scope">
            <!--reason是个空对象则展示无  -->
            <span v-if="Object.keys(scope.row.reason).length === 0">无审核备注</span>
            <div v-if="Object.keys(scope.row.reason).length !== 0"> 
                <el-popover
                placement="top-start"
                title="审核信息"
                width="220"
                trigger="hover"
              >
                <div v-html="getPopoverContent(scope.row.reason)"></div>
                <el-button slot="reference" type="text" size="mini">查看审核</el-button>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="工单ID" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
          <template  slot-scope="scope">
            <el-button 
             size="mini" type="text" icon="el-icon-edit" @click="handleUpdata(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="hanldeRemove(scope.row.signName)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      </el-card>
      <!-- 弹出框 新增 -->
    <el-dialog :title="upload.title" width="600px"  :visible.sync="dialogVisible" @close="addDialogClosed" append-to-body> 
      <!-- 内容主题区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
        <el-row>
          <el-col :span="18">
            <el-form-item label="签名名称" prop="signName">
                <el-input v-model="addForm.signName" placeholder="请输入签名名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="签名来源" prop="signSource">
                <!-- 签名来源,0:企事业单位,1:工信部备案网站,2:App应用,3:公众号或小程序,4:电商平台店铺名,5:商标名 下拉 -->
                <el-select v-model="addForm.signSource" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in signSourceTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="申请说明" prop="remark">
              <el-input 
              type="textarea"
              :rows="2"
              v-model="addForm.remark" placeholder="请输入申请说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="签名类型" prop="signType">
                <!-- 验证码：0，通用：1 -->
                <el-radio-group v-model="addForm.signType">
                  <el-radio :label="0">验证码</el-radio>
                  <el-radio :label="1">通用</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件格式" prop="signFileList">
                <el-upload
                class="avatar-uploader"
                action='#'
                :on-change="getFile"
                :auto-upload="false"
                :multiple=true
                >
                    <el-button  type="text" style="margin-left: 10px;">上传文件</el-button>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
    name: "signatureManagement",
    data() {
        return {
            userList: [],
            total:0,
            queryInfo: {
                // 当前的页数
                currentPage: 1,
                // 当前每页显示多少条数据
                pageSize: 10,
            },
            // 对话框显示与隐藏
          dialogVisible: false,
          addForm: {
            signFileList: [],
            signName:'',
            signSource:'',
            remark:'',
            signType:''
          },
          addFormRules: {
            //全部必填
            signName: [
              { required: true, message: '请输入签名名称', trigger: 'blur' },
            ],
            signSource: [
              { required: true, message: '请选择签名来源', trigger: 'change' }
            ],
            remark: [
              { required: true, message: '请输入申请说明', trigger: 'blur' },
            ],
            signType: [
              { required: true, message: '请选择签名类型', trigger: 'change' }
            ],
            signFileList: [
              { required: true, message: '请上传文件', trigger: 'change' }
            ]
          },
          // 用户导入参数
          upload: {
            // 弹出层标题（用户导入）
            title: '',
          }, 
          signSourceTypeOptions:[
            {
              value: '0',
              label: '企事业单位'
            },
            {
              value: '1',
              label: '工信部备案网站'
            },
            {
              value: '2',
              label: 'App应用'
            },
            {
              value: '3',
              label: '公众号或小程序'
            },
            {
              value: '4',
              label: '电商平台店铺名'
            },
            {
              value: '5',
              label: '商标名'
            }
          ],
          isUpdata :false //是否是修改
        }
    },
    methods: {
      // 监听 pageSize 改变的事件
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize
        this.getList()
      },
      // 监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.queryInfo.currentPage = newPage
        this.getList()
      },
      // 签名管理列表
      async getList() {
        const params = {
          ...this.queryInfo,
          isPage: true
        }
        const { data: res } = await this.$http.post('/note/signPage', params)
        if (res.code === 20000) {
          this.userList = res.data.body.smsSignList
          this.total = parseInt(res.data.body.totalCount)
        } else {
          this.$message.error(res.msg)
        }
      },
      addTaskHandle() {
        this.dialogVisible = true
        this.upload.title = '签名申请'
        this.isUpdata = false
      },
      handleUpdata(row){
        this.dialogVisible = true
        this.upload.title = '修改申请'
        this.addForm={
          signName:row.signName,
          signSource:row.signSource,
          remark:row.remark,
          signType:row.signType,
          signFileList:row.signFileList
        }
        this.isUpdata = true
      },
      // 监听添加用户对话框确定按钮的点击事件
      handleOk(){
        const params = this.addForm
        this.$refs['addFormRef'].validate(async valid => {
          if(valid){
            if(this.isUpdata){
              const { data: res } = await this.$http.post('/note/signUpdate', params)
              if (res.code === 20000) {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            }else{
              const { data: res } = await this.$http.post('/note/signAdd', params)
              if (res.code === 20000) {
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            }
          }else{
            return false
          }
        })
      },
      // 监听添加用户对话框关闭事件
      addDialogClosed() {
        // 重置表单
        this.$refs['addFormRef'].resetFields()
        this.isUpdata = false
        this.dialogVisible = false
        this.addForm={
          signName:'',
          signSource:'',
          remark:'',
          signType:'',
          signFileList:[]
        }
      },
      hanldeRemove(code){
        this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data: res } = await this.$http.get(
            `/note/signDelete?signName=${code}`
          );
          if (res.code === 20000) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      getPopoverContent(reason) {
        return `
          <div>
            <p>审核时间：${reason.rejectDate}</p>
            <p>原因：${reason.rejectInfo}</p>
            <p>审核备注：${reason.rejectSubInfo}</p>
          </div>
        `;
      },
      // 上传文件
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
      getFile(file, fileList) {
      this.addForm.signFileList=[]
      fileList.forEach(file => {
          this.getBase64(file.raw).then(res => {
            console.log(res);
              // 这里拿到base64的文件流，处理你自己的业务逻辑
              this.addForm.signFileList.push({
              fileContents: res,
              fileSuffix: file.raw.type.split('/')[1],
              });
          });
          });
      },
    },
    created() {
        this.getList()
    }
}
</script>

<style scoped lang="less">

</style>